<template>
    <div class="dateVue">
      <el-date-picker
        v-model="time"
        type="daterange"
        align="right"
        :editable="false"
        unlink-panels
        :range-separator="$t('order.to')"
        :start-placeholder="$t('order.beginTime')"
        :end-placeholder="$t('order.endTime')"
        value-format="yyyy-MM-dd"
        :default-value="defaultValue"
        :picker-options="pickerOptions()"
        size="small">
      </el-date-picker>
    </div>
</template>

<script>
export default {
  data() {
    return {
      time: [], // 日期数组
      defaultValue: new Date()
    };
  },
  props: {
    dateDefault: {
      type: Array,
      default() {
        return []
      },
    },
    disData: { // 可选时间范围
      type: Number,
      default: -1,
    },
    resetData: {
      type: Number,
      default: 0,
    }
  },
  watch: {
    time(newVal) {
      this.$emit('ListenTimeArr', newVal);
    },
    dateDefault: function change() {
      this.time = this.dateDefault;
    },
    '$store.state.app.language': function listen() {
      this.pickerOptions();
    },
    disData: function change(val) {
      this.defaultValue = new Date();
      this.time = []; // 日期数组
      if (val === 1) { // 2018
        this.defaultValue = new Date('2018-01-01');
      }
      if (val === 2) { // 2019
        this.defaultValue = new Date('2019-01-01');
      }
      if (val === 3) { // 2020
        this.defaultValue = new Date('2020-01-01');
      }
      this.pickerOptions();
    },
    resetData: function change() {
      this.defaultValue = new Date();
      this.time = [];
    }
  },
  mounted() {
  },
  methods: {
    pickerOptions() {
      const self = this;
      return { // 快捷选择数据
        disabledDate(time) {
          return self.disabledDate(time);
        },
        // shortcuts: [
        //   {
        //     text: this.$t('order.nearThreeDate'),
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - (3600 * 1000 * 24 * 3));
        //       picker.$emit('pick', [start, end]);
        //     }
        //   },
        //   {
        //     text: this.$t('order.nearWeek'),
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - (3600 * 1000 * 24 * 7));
        //       picker.$emit('pick', [start, end]);
        //     }
        //   },
        //   {
        //     text: this.$t('order.nearMouth'),
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - (3600 * 1000 * 24 * 30));
        //       picker.$emit('pick', [start, end]);
        //     }
        //   }
        // ],
      }
    },
    disabledDate(time) {
      if (this.disData === 0) { // 前三个月
        const curDate = (new Date()).getTime();
        const three = 90 * 24 * 3600 * 1000;
        const threeMonths = curDate - three;
        return time.getTime() > Date.now() || time.getTime() < threeMonths;
      }
      if (this.disData === 2) { // 2019
        return time.getTime() > Date.now() || time.getTime() < new Date('2018-12-31');
      }
      if (this.disData === 1) { // 2018
        return time.getTime() < new Date('2017-12-31') || time.getTime() > new Date('2018-12-31');
      }
      return time.getTime() > Date.now();
    }
  }
};
</script>

<style lang="scss" scoped>

  .dateVue {
    display: inline-block;
  }
  .dateVue /deep/ .el-date-editor {
    width: 100%;
    padding: 3px 0px 3px 10px;
  }

  .theme-1B1D27 {
    .dateVue /deep/.el-range-separator,
    .dateVue /deep/.el-range-input,
    .dateVue /deep/.el-range-input::placeholder,
    .dateVue /deep/.el-breadcrumb__inner {
      color: RGBA(197, 206, 228, 1) !important;
    }
  }
</style>
